<template>
	<div class="lz-rent_list position-relative h-100">
		<el-tabs class="d-flex flex-column h-100" v-model="activeName" @tab-click="handleClick">
			<el-tab-pane class="h-100 tabpane" label="整租" name="first">
				<el-form :inline="true" :model="formInline" size="small">
					<el-form-item label="出租状态">
						<el-select v-model="formInline.region" placeholder="未选择">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="楼层筛选">
						<el-select v-model="formInline.region" placeholder="未选择">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="租客姓名">
						<el-select v-model="formInline.region" placeholder="未选择">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="其他搜索">
                        <el-input v-model="formInline.name"></el-input>
                    </el-form-item>
					<el-form-item>
						<el-button type="primary">查询</el-button>
					</el-form-item>
				</el-form>

                <div class="container_list">
                    <FlatsItemCom 
                        @toIntelligentDevice="handleIntelDevice" 
                        @toTenant="handleTenant"
                        @toHouseResource="handleHouseResource"
                        v-for="(item, index) of flatList" :key="index"></FlatsItemCom>
                </div>

			</el-tab-pane>

			<el-tab-pane class="h-100 tabpane" label="合租" name="second">
				<el-form :inline="true" :model="formInline" size="small">
					<el-form-item label="出租状态">
						<el-select v-model="formInline.region" placeholder="未选择">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="楼层筛选">
						<el-select v-model="formInline.region" placeholder="未选择">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="租客姓名">
						<el-select v-model="formInline.region" placeholder="未选择">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="其他搜索">
                        <el-input v-model="formInline.name"></el-input>
                    </el-form-item>
					<el-form-item>
						<el-button type="primary">查询</el-button>
					</el-form-item>
				</el-form>

                <div class="container_list">
                    <FlatsItemCom :showTitle="false"
                        @toIntelligentDevice="handleIntelDevice" 
                        @toTenant="handleTenant"
                        @toHouseResource="handleHouseResource"
                        v-for="(item, index) of flatList" :key="index"></FlatsItemCom>
                </div>
			</el-tab-pane>
		</el-tabs>

        <el-button type="primary" class="position-absolute addFlat" size="small" icon="el-icon-plus">添加房源</el-button>


        <el-dialog title="开锁记录" :visible.sync="dialogTableVisible" width="75%" top="5vh">
			<IntelligentDevice></IntelligentDevice>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
		</el-dialog>


        <el-dialog title="租户信息" :visible.sync="dialogTenantVisible" top="5vh">
			<Tenant></Tenant>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTenantVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogTenantVisible = false">确 定</el-button>
            </span>
		</el-dialog>

        <el-dialog title="房源详情" :visible.sync="dialogHouseResource" top="5vh">
			<HouseResource></HouseResource>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogHouseResource = false">取 消</el-button>
                <el-button type="primary" @click="dialogHouseResource = false">确 定</el-button>
            </span>
		</el-dialog>

	</div>
</template>

<script>
    import FlatsItemCom from './../../components/rent/FlatsItem.component';
    import IntelligentDevice from './dialog/IntelligentDevice.dialog';
    import Tenant from './dialog/Tenant.dialog';
    import HouseResource from './dialog/HouseResource.dialog'

	export default {
		name: 'RentListManage',
		data() {
			return {
				activeName: 'first',
				formInline: {
					user: '',
					region: ''
                },
                flatList: Array.from({length: 2}).fill(1),
                dialogTableVisible: false,
                dialogTenantVisible: false,
                dialogHouseResource: false
			}
        },
        components: {
            FlatsItemCom,
            IntelligentDevice,
            Tenant,
            HouseResource
        },
		methods: {
            handleClick(){},
            handleIntelDevice(data){
                this.dialogTableVisible = true;
            },
            handleTenant(){
                this.dialogTenantVisible = true;
            },
            handleHouseResource(){
                this.dialogHouseResource = true;
            }
		}
	}

</script>
<style lang="scss" scoped>
	.lz-rent_list {
		.tabpane {
			display: flex;
			flex-direction: column;
        }
        .addFlat{
            top:4px; right: 175px;
        }
	}

	.search {
		height: 40px;
	}

	.container_list {
		overflow: auto;
	}

	.record_dialog {
		overflow: hidden;

		.record_list {
			overflow: auto;
		}
	}

</style>
